<template>
	<view class="whole">
		<!-- 背景的过渡效果 -->
		  <view   :class="['modal-background', { 'fade-out': !showCommentModal, 'fade-in': showCommentModal}]"></view>
		<!-- 评论内容的滑动效果 -->
		  <view  :class="['modal', { 'slide-in': showCommentModal, 'slide-out': !showCommentModal }]">
			  <view class="modal-content">
			    <!-- 模态框头部 -->
			    <view class="modal-header">
			      <text class="modal-title">评论 {{ commentCount }}</text>
			      <view class="close" @click="closeModal">&times;</view>
			    </view>
			  <dynamic-list-xhd
			  :itemList="processedComments"
			  :viewHeight="viewHeight"
			  :itemHeight="110"
			  :loadCount="loadCount" 
			  :fetchData="fetchComments"
			  class="comments-area"
			  >
			    
			     <template v-slot:item="{ item }" >
			  	   <comment-item-xhd :item="item" 
			  	   :key="item.id"
			  	   :isReply="false"
			  	   @update-comment-fold-unfold="updateCommentFoldUnfold"
			  	   @remove="removeComment"
			  	   @like="handleLike" 
			  	   @dislike="handleDislike" 
			  	   @toggleFoldAndUnfold="toggleCommentDisplay"
				    @getRplyMsg="getRplyMsg"
					@toggleReplyPanel="toggleReplyPanel"
					@openCommentPopup="openCommentPopup"
					:myInfo="myInfo"
					:authorInfo="authorInfo"
					
			  	   ></comment-item-xhd>
			     </template>
			  </dynamic-list-xhd>
			  
		      <write-comment-xhd 
			  :userAvatar="myInfo.userAvatar"
			  @openSendPanel="openSendPanel"
				 >
			  </write-comment-xhd>
		    </view> <!-- modal-content end -->
			
		  </view> <!-- modal end -->
	
		
		
		
		<!-- 回复面板 -->
				<view  :class="['reply-panel', { 'slide-in': showReplyPanel, 'slide-out': !showReplyPanel }]" >
					<view class="reply-panel-content">
					<view class="reply_header">
						 <view class="reply_title">评论详情</view>
						 <view class="close" @click="closeReplyPanel" >&times;</view>
					</view>
				<view  v-if="!removeReplyMainComment" class="reply-content">
					<dynamic-list-xhd
					:itemList="selectedComment.replies"
					:viewHeight="viewReplyHeight"
					:itemHeight="110"
					:loadCount="loadCount" 
					:fetchData="fetchReplyComments"
					class="reply-list"
					>
					<!-- 头部插槽 -->
					<template v-slot:header>
					  <view class="main-comment">
						  <!-- 可以在这里添加更多的头部内容 -->
						  <comment-item-xhd :item="selectedComment"
						  :key="selectedComment.id"
						  @remove="removeComment"
						  @like="handleLike" 
						  @dislike="handleDislike" 
						  :myInfo="myInfo"
						  :authorInfo="authorInfo"
						  @getRplyMsg="getRplyMsg"
						  @toggleReplyPanel="toggleReplyPanel"
						  @openCommentPopup="openCommentPopup"
						  :isNeedReplyComtent="false"
						  :isMainComment="true"
						  ></comment-item-xhd>
						  
					  </view>
					</template>
					
					<template v-slot:reply-header>
						  <!-- 回复头部，只出现一次 -->
						       <view class="reply-header">
						         <view class="reply-count">
						           相关回复: {{ selectedComment.replies.length }} 条
						         </view>
						         <view class="reply-icon">							   
						           <image class="iconfont icon-tihuan" @click="toggleSort"></image>
						            <text class="reply-icon-text">{{ sortBy === 'hot' ? '按热度' : '按时间' }}</text>
						         </view>
						       </view>
					</template>
					<template v-slot:item="{ item }" >
					  <comment-item-xhd :item="item" 
					  :key="item.id"
					  @remove="removeComment"
					  @like="handleLike" 
					  @dislike="handleDislike" 
					  :myInfo="myInfo"
					  :authorInfo="authorInfo"
					  :isReply="true"
					  @getRplyMsg="getRplyMsg"
					  @toggleReplyPanel="toggleReplyPanel"
					  @openCommentPopup="openCommentPopup"
					  :isNeedReplyComtent="false"
					  ></comment-item-xhd>
					</template>
					</dynamic-list-xhd>
					
					</view>
					<view v-else class="remove-reply-main-content">
					
						<view class="placeholder">
						<image src="@/static/img/kuxixi.jpg" class="placeholder-image" />
						<text class="placeholder-text">不汐汐，该评论已被删除</text>
						</view>
						</view>
					<view class="write-comment-xhd">
					<write-comment-xhd
					:userAvatar="myInfo.userAvatar"
					@openSendPanel="openSendPanel"
					>
					</write-comment-xhd>
					</view>
					</view><!--reply-panel-content-->
				</view><!--reply-panel-->
		<!--发评论-->
		<transition name="slide-fade">
		      <view v-if="isInputVisible" class="overlay"  @click="closeSendPanel" >
		        <view class="sliding-panel" @click.stop  >
				  <view class="text">
					  <span v-if="replyMsg !== null">回复 @{{ replyMsg.replyToName }}</span>
					  <span v-else>发表评论</span>
				  </view>
				  <view class="content">
					  <view class="textarea-input-placeholder">
					   <view v-if="newCommentText.length===0" class="placeholder">
					        <image src="@/static/img/changli_com.jpg" class="placeholder-image" />
					        <text class="placeholder-text">对着长离写点吧</text>
					    </view>
					  <textarea
					   auto-focus
					    v-model="newCommentText" 
					    :class="['textarea-input', { 'is-focused': isCommentFocused }]"
						 @focus="isCommentFocused = true" 
						 @blur="isCommentFocused= false"
						>
					  	</textarea>
						</view>
					  <button @click="submitComment" class="submit-button">发送</button>
				  </view>
		        </view>
		      </view>
		</transition>
		
		
		
		<!--点击跳出选项框-->
		
			
		 <view v-if="showCommentPopup" class="comment-popup-overlay" @click="closeCommentPopup">
		      <view  :class="['comment-popup', { 'slide-in': showCommentPopup, 'slide-out': !showCommentPopup }]" @click.stop >
		      	<view class="popup-content">
		      	     <view class="options">
		      	         <view class="option-group">
		      	            <view class="option optionBorder " @click="replyComment">
								  <image class="iconfont icon-pinglun1 icon"  ></image>
								  <span>回复</span>
							</view>
		      	            <view class="option" @click="copyCommentText">
								<image class="iconfont icon-fuzhi icon"  ></image>
								<span>复制</span>
								
								</view>
		      	        </view>
		      	        <view class="option-group" v-if="selectedCommentByPopup!=null && selectedCommentByPopup.userId!=myInfo.userId" >
		      	          <view class="option optionBorder">
						  <image class="iconfont icon-jubao icon"  ></image>
						  <span>举报</span>
						 
						  
						  </view>
		      	          <view class="option" >
							  <image class="iconfont icon-jiaruheimingdan icon"  ></image>
							  <span> 加入黑名单</span>
							  
							 </view>
		      	        </view>
						
						<view class="option-group" v-if="selectedCommentByPopup!=null && selectedCommentByPopup.userId===myInfo.userId" >
						  <view class="option " @click="removeCommentByPopup">
						  <image class="iconfont icon-shanchu icon"  ></image>
						  <span>删除</span>
						  </view>
						   </view>
						
		      	     </view>
		      	 </view>
		      </view>
		  </view>
		
	</view>
</template>

<script>
	export default {
		name:"comment-section-xhd",
		 props: {
			 fetchComments: { // 接收 fetchComments 方法
			    type: Function,
			    required: true,
			},
			 fetchNetworkReplyComments:{
				 type: Function,
				 required: true,
			 },
			 handleNetworkLike: { // 接收网络点赞处理方法
			      type: Function,
			      required: true,
			    },
			   handleNetworkDislike: { // 接收点踩处理方法
			      type: Function,
			      required: true,
			    },
			loadCount: { // 每次加载的数量
			    type: Number,
			    default: 10, // 默认加载数量
			},
		    comments: { // 接收评论列表
		      type: Array,
		      required: true,
		    },
			// 控制评论区显示的状态
			showCommentModal: {
			  type: Boolean,
			  required: true,
			},
			// 父组件传递的评论总数
			commentCount: {
			  type: Number,
			  default: 0,
			},
			//我的信息
			myInfo:{
				 type: Object,
				 required: true,
			},
			//文章作者信息
			  authorInfo: {
			      type: Object,
			      required: true
			},
		  },
		data() {
			return {
				replyMsg:null,//默认回复的信息
				newCommentText:'',
				isCommentFocused:false,
				isInputVisible:false,
				replyToComment: null, // 父级评论的ID
				viewHeight:0,
				viewReplyHeight:0,
				processedComments:[],
				showReplyPanel:false,//打开回复列表
				selectedComment:{
					replies:[]
				},
				sortBy: 'hot', // 默认按热度排序
				showCommentPopup:false,
				selectedCommentByPopup:null,
				removeReplyMainComment:false,
				isReply:false,
				isMianComment:false
			};
		},
		methods:{
			// 关闭评论模态框
			closeModal() {
			 //console.log(11);
			  this.$emit("closeModal"); // 更新父组件中的 showCommentModal
			  this.showReplyPanel=false;
			},
			//收起和展开
			 toggleCommentDisplay(commentId) {
			    const commentIndex = this.processedComments.findIndex(comment => comment.id=== commentId);
			    if (commentIndex != -1) {
			        this.processedComments[commentIndex].isFolded = !this.processedComments[commentIndex].isFolded; // 切换折叠状态
			    }
			},
			 removeComment(commentId,isreply,isMainComment) {
				 if (isreply && !isMainComment) {
				    const id = this.selectedComment.id; // 获取当前选择的评论 ID
				    const index = this.processedComments.findIndex(comment => comment.id === id); // 找到评论的索引
				
				    if (index !== -1) {
				      const replys = this.processedComments[index].replies; // 获取该评论的回复
				      const replyIndex = replys.findIndex(c => c.id === commentId); // 找到要删除的回复的索引
				
				      if (replyIndex !== -1) {
				        replys.splice(replyIndex, 1); // 从 replies 数组中删除该回复
				        console.log('回复已删除');
				      } else {
				        console.log('未找到要删除的回复');
				      }
				    } else {
				      console.log('未找到评论');
				    }
				  } else {
					this.removeReplyMainComment=isMainComment;
				    this.$emit('remove-comment', commentId); // 触发事件，通知父组件删除评论
				  }
			 },
			 updateCommentFoldUnfold({id,actualHeight,isFolded}){
				 const commentIndex = this.processedComments.findIndex(c => c.id === id);
				   if (commentIndex !== -1) {
				     // 使用 this.$set 来确保响应式
				     this.$set(this.processedComments[commentIndex], 'height', actualHeight);
				     this.$set(this.processedComments[commentIndex], 'isFolded', isFolded);
				     this.$set(this.processedComments[commentIndex], 'isDisplayFoldAndUnfold', true); // 显示展开/收起按钮
				   }
			 },
			async handleLike(commentId,isReply){
				const isSuccess =await this.handleNetworkLike();
				if(!isSuccess){
					return;
				}
				var comment=null;
				if(isReply){
					
					const id=this.selectedComment.id;
					const index = this.processedComments.findIndex(comment => comment.id === id);
					if (index !== -1) {
					const replys= this.processedComments[index].replies;
					//在replys找到commentId
					comment =replys.find(c => c.id=== commentId);
					} else {
					    console.log('未找到评论');
					}
				}else{
					comment = this.processedComments.find(c => c.id=== commentId);
				}			 		
				if (comment) {
				  if (comment.isLiked===1) {
					   	 comment. likesCount -= 1;
					   	comment.isLiked=0;
				  } else {
				      comment.likesCount += 1;
					   	comment.isLiked=1;
				      // 触发动画
				      comment.animationTriggered = true;
				       setTimeout(() => {
				           comment.animationTriggered = false; // 动画结束后重置状态
				       }, 500); // 动画持续时间
				  }
				}
			 },
			async handleDislike(commentId,isReply){
				
				const isSuccess =await this.handleNetworkDislike();
				if(!isSuccess){
					return;
				}
				
				var comment=null;
				if(isReply){
					
					const id=this.selectedComment.id;
					const index = this.processedComments.findIndex(comment => comment.id === id);
					if (index !== -1) {
					const replys= this.processedComments[index].replies;
					//在replys找到commentId
					comment =replys.find(c => c.id=== commentId);
					} else {
					    console.log('未找到评论');
					}
				}else{
					comment = this.processedComments.find(c => c.id=== commentId);
				}	
			 		   if (comment) {
			 		   	if(comment.isLiked===2){
			 		   		 comment.isLiked=0;
			 		   	}else{
			 		   		if( comment.isLiked===1){
			 		   			comment.likesCount -= 1;
			 		   		}
			 		   		 comment.isLiked=2;
			 		   		// 触发动画
			 		   		comment.animationTriggered = true;
			 		   		 setTimeout(() => {
			 		   		     comment.animationTriggered = false; // 动画结束后重置状态
			 		   		 }, 500); // 动画持续时间}
			 				 }
			 		   }
			 },
			 initCommentSection() {
			     this.initializeCommentProperties();
			   //     this.$nextTick(() => {
			 		
			   //       this.processedComments.forEach(comment => {
			   //         this.checkCommentTextHeight(comment.commentId);
			   //       });
			   //     });
			 },
			
			    initializeCommentProperties() {
					
			 	  // 创建旧字典和新字典
			 	   const oldCommentMap = {};
			 	   const newCommentMap = {};
			 	 
			 	   // 将 processedComments 存入旧字典
			 	   this.processedComments.forEach(comment => {
			 	     this.$set(oldCommentMap, comment.id, {
			 	       ...comment,
			 	       replies: comment.replies || [], // 保留已有的子评论
			 	     });
			 	   });
			 	 
			 	   // 将 comments 存入新字典，并初始化特定属性
			 	   this.comments.forEach(comment => {
			 	     this.$set(newCommentMap, comment.id, {
			 	       ...comment,
			 	       replies: [], // 初始化子评论数组
			 	       height: 9999, // 默认值
			 	       isFolded: true, // 默认值
			 	       isDisplayFoldAndUnfold: false, // 默认值
			 	       animationTriggered: false // 默认值
			 	     });
			 	   });
				   
				   // 遍历新评论，将子评论添加到父评论中
				   for (const comment of this.comments) {
				     if (comment.parentId !== null) {
				       const parentComment = newCommentMap[comment.parentId];
				       if (parentComment) {
				         parentComment.replies.push(newCommentMap[comment.id]);
				       }
				     }
				   }
			 	 
			 	   // 遍历旧字典，如果能在新字典找到对应的评论，则用旧字典的属性覆盖新字典的属性
			 	   Object.keys(oldCommentMap).forEach(commentId => {
			 	     if (newCommentMap[commentId]) {
			 	       const oldComment = oldCommentMap[commentId];
			 	       const newComment = newCommentMap[commentId];
			 	       // 用旧字典的属性覆盖新字典的属性
						newComment.isLiked=oldComment.isLiked;
						newComment.likesCount=oldComment.likesCount;
						newComment.replyCount=oldComment.replyCount;
			 	       newComment.height = oldComment.height; // 从旧字典获取高度
			 	       newComment.isFolded = oldComment.isFolded; // 从旧字典获取折叠状态
			 	       newComment.isDisplayFoldAndUnfold = oldComment.isDisplayFoldAndUnfold; // 从旧字典获取显示状态
			 	       newComment.animationTriggered = oldComment.animationTriggered; // 从旧字典获取动画触发状态
			 	       //  也可以选择保留旧评论的 replies
			 	       newComment.replies = oldComment.replies;
			 	     }
			 	   });
			 	 
			 	   // 获取所有 parent_id 为 null 的评论
			 	   this.processedComments = Object.values(newCommentMap).filter(comment => comment.parentId === null);
			 	   // console.log(this.processedComments); 
			    },
				calculateViewHeight() {
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.comments-area').boundingClientRect(data => {
							if (data ) {
							  console.log('高度:', data.height);
							  this.viewHeight=data.height;
							} 
						}).exec();
					});	
				},
				calculateViewReplyHeight() {
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.reply-list').boundingClientRect(data => {
							if (data ) {
							  console.log('回复list高度:', data.height);
							  this.viewReplyHeight=data.height;
							} 
						}).exec();
					});	
				},
				//打开发送区
				openSendPanel(){
					this.isInputVisible=true;
				},
				closeSendPanel(){
					this.isInputVisible=false;
					this.newCommentText='';
					this.clearReplyMsg();
				},
				submitComment() {
					// 提交评论的逻辑
					var comment;
					if(this.replyMsg!=null){
						comment={
							//id: 2,
							parentId: this.replyMsg.parentId,
							replyToId:this.replyMsg.replyToId ,
							replyToName: this.replyMsg.replyToName,
							//userId: 2,
							//username: '李四',
							//profileImage: "../../static/img/test2.jpg",
							//userIp: '火星',
							isLiked: 0,
							likesCount: 0,
							commentText: this.newCommentText.trim(),
							replyCount: 0,
							//createdAt: '2024-2-21 10:15:00',
						}
					}else{
						comment={
							//id: 2,
							parentId: null,
							replyToId:this.authorInfo.userId ,
							replyToName: this.authorInfo.username,
							//userId: 2,
							//username: '李四',
							//profileImage: "../../static/img/test2.jpg",
							//userIp: '火星',
							isLiked: 0,
							likesCount: 0,
							commentText: this.newCommentText.trim(),
							replyCount: 0,
							//createdAt: '2024-2-21 10:15:00',
						}
					}
					this.$emit("addComment",comment);
					this.closeSendPanel();
					
				},
				clearReplyMsg(){
					this.replyMsg=null;
				},
				getRplyMsg(item){
					this.replyMsg={
						replyToId: item.userId, // 被回复评论的ID
						replyToName: item.username, // 被回复人的名称
						parentId: item.id, // 父级评论的ID
					};
				},
				toggleReplyPanel(item){
					//返回主评论的id
					this.showReplyPanel=true;
	    			// 根据 item 找到 processedComments 中的索引
				  this.selectedComment=item;
				  this.calculateViewReplyHeight();
				},
				closeReplyPanel(){
					this.showReplyPanel=false;
					//初始化数据 ---因为是多个回复列表
					this.viewReplyHeight=0;
					this.removeReplyMainComment=false;
					//this.selectedComment.replies=[];
				},
				async fetchReplyComments(count){
					//reconsole.log(count);
					if(this.showReplyPanel){
						//网络加载reply的业务
						const id=this.selectedComment.id;
						const replyComments=await this.fetchNetworkReplyComments(count,id);
						return new Promise((resolve) => {			 
							 //1.加载的reply数据
							// 根据 item 找到 processedComments 中的索引
							const index = this.processedComments.findIndex(comment => comment.id === id);						 
							if (index !== -1) {
							    this.processedComments[index].replies.push(...replyComments);
							    resolve(replyComments); 
							} else {
							    console.log('未找到评论');
							}	 
						});
					}
					
				},
				toggleSort() {
				     // 切换排序方式
				     this.sortBy = this.sortBy === 'hot' ? 'time' : 'hot';
				   },
				   closeCommentPopup(){
				   	this.showCommentPopup=false;
					this.selectedCommentByPopup=null;
					this.isReply=false;
					this.isMianComment=false;
				   },
				  openCommentPopup(comment,isReply,isMainComment){
					  this.showCommentPopup=true;
					  this.selectedCommentByPopup=comment;
					  this.isReply=isReply;
					  this.isMianComment=isMainComment;
					  console.log(comment);
				  },
				  replyComment(){
					  this.showCommentPopup=false;
					  if(this.selectedCommentByPopup!=null){
					     this.getRplyMsg(this.selectedCommentByPopup);
					  }
					 
					  console.log(this.replyMsg);
				  },
				   copyCommentText() {
				          // 使用 uni.setClipboardData 复制文本到剪贴板
						  if(this.selectedCommentByPopup==null){
							  return;
						  }  
				               uni.setClipboardData({
				                 data: this.selectedCommentByPopup.commentText,
				                 success: () => {
				                   uni.showToast({
				                     title: '文本已复制到剪贴板',
				                     icon: 'success',
				                   });
				                 },
				                 fail: () => {
				                   uni.showToast({
				                     title: '复制失败',
				                     icon: 'none',
				                   });
				                 },
				               });
				        this.closeCommentPopup();
				    },
					removeCommentByPopup(){
						this.removeComment(this.selectedCommentByPopup.id,this.isReply,this.isMianComment);
						console.log(this.selectedCommentByPopup.id,this.isReply,this.isMianComment)
						this.closeCommentPopup();
					}
		},
		 watch: {
		    comments: {
		      immediate: true,
		      handler(newComments) {
				// console.log(this.comments);
		        this.initializeCommentProperties(); // 当 comments 更新时重新处理评论
				console.log(this.processedComments);
				
		      }
		    },
			showCommentModal(newVal) {
			     if (newVal) {
			       // 当 showCommentModal 变为 true 时初始化数据
				   this.calculateViewHeight();
			     }
			   },
			processedComments(newVal){
				console.log(newVal);
				if(this.showReplyPanel){
					const id=this.selectedComment.id;
					console.log(id);
					const index = this.processedComments.findIndex(comment => comment.id === id);
					if (index !== -1) {
						// console.log()
					 //    this.processedComments[index].replies.push(...replyComments);
					 //    resolve(replyComments); 
					 
					} else {
					    console.log('未找到评论');
					}	 
				}
			},
			replyMsg: {
				immediate: true,
				  handler(newReplyMsg) {
					if(newReplyMsg!=null){
						console.log(newReplyMsg);
						this.openSendPanel();
					}
				  }
				},
		  },
		mounted() {
			// this.initCommentSection();
		},
		onShow() {
			this.initializeCommentProperties();
		}
	}
</script>

<style lang="scss">
/* 背景模态框 */
.whole{
	height:100%;
	width: 100%;
}
.modal-background {
  position: fixed; /* 固定定位，覆盖整个页面 */
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.3 */
  z-index: 998; /* 背景层次在内容下方 */
  opacity: 0;
  transform: translateY(100%);
  transition:  opacity 0.1s ease; /* 添加过渡效果 */
}

.modal-background.fade-in {
  transform: translateY(0); /* 滑入 */
  opacity: 1; /* 完全可见 */
}

/* 滑出效果 */
.modal-background.fade-out {
	transform: translateY(100%); /* 滑入 */
    opacity: 0; /* 完全透明 */
}


// .custom-item {
//   padding: 10px;
//   border-bottom: 1px solid #ccc;
//   margin: 5px 0;
// }


/* 评论模态框 */
.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 从底部对齐 */
  z-index: 9999; /* 确保模态框位于最上层 */
  /* 初始状态为隐藏 */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
  /* 内容区域样式 */
  .modal-content {
    background-color: white;
    padding: 20rpx;
    border-radius: 30rpx;
    width: 100%;
    height: 70%; /* 最大高度 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 纵向布局 */
    position: relative;
  }
  /* 头部样式 */
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50rpx;
  
    /* 标题样式 */
    .modal-title {
      line-height: 50rpx;
      height: 100%;
      font-size: 30rpx;
      text-align: center;
      flex-grow: 1; /* 让标题占据剩余空间 */
    }
  
    /* 关闭按钮样式 */
    .close {
      position: absolute;
      right: 30rpx;
      text-align: center;
      line-height: 50rpx;
      cursor: pointer;
      font-size: 40rpx;
    }
  }
  
  .comments-area {
	  flex: 1;
   // flex-grow: 1; /* 占据剩余空间 */
    overflow: hidden; /* 隐藏溢出部分 */
	//background-color: red;
	}
  

  
 }

 
/* 滑入效果 */
.modal.slide-in {
  transform: translateY(0); /* 滑入 */
  opacity: 1; /* 完全可见 */
}

/* 滑出效果 */
.modal.slide-out {
  transform: translateY(100%); /* 滑出 */
  opacity: 0; /* 完全透明 */
}
 
 
 
 /* 回复面板样式 */
  .reply-panel {
 	background-color: white;
    z-index: 9999; /* 确保该面板在最上层 */
    position: fixed; /* 固定定位 */
   // bottom: 0; /* 距离底部为0 */
  
    width: 100%; /* 宽度占满100% */
    height: calc(70% - 25rpx); /* 高度为70%减去50rpx */
   // transition: transform 2s ease; /* 添加平滑过渡效果 */
	// position: absolute;
	  bottom: 0; /* 初始位置在视图外 */
	  left: 0;
	  right: 0;
	 transform: translateY(100%);
	 transition: transform 0.5s ease; /* 添加过渡效果 */
	 .reply-panel-content{
		display: flex; /* 使用弹性布局 */
		 flex-direction: column; /* 纵向布局 */
		 height: 100%;
		 width: 100%;
		
		 box-sizing: border-box;
	 
	.reply_header {
	     display: flex; /* 使用弹性布局 */
	     justify-content: space-between; /* 左右分散对齐 */
	     align-items: center; /* 垂直居中对齐 */
	     //margin-bottom: 10rpx; /* 底部间距 */
	 	  border-bottom: 1rpx solid #ccc;
	 	  .reply_title {
	 	      font-size: 16px; /* 字体大小 */
	 	      font-weight: bold; /* 加粗 */
			  margin-left: 20rpx;
	 	  }
	 	  
	 	  .close {
	 	      font-size: 35px; /* 字体大小 */
	 	      cursor: pointer; /* 鼠标指针样式 */
	 	      color: rgba(0, 0, 0, 0.25); /* 关闭按钮颜色 */
	 	      transition: color 0.3s; /* 颜色过渡效果 */
			  margin-right: 20rpx;
	 	  }
	}
	.remove-reply-main-content{
		background-color:white; /* 设置淡灰色背景 */
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		.placeholder {
		   display: flex;
		    align-items: center;
		    position: absolute;
			//background-color: #000;
		   flex-direction: column; /* 垂直排列 */
		  .placeholder-image {
		   width: 150rpx;
		   height: 150rpx;
		   margin-bottom: 10rpx; /* 图片与文字之间的间距 */
		  }
		  
		  .placeholder-text {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		    color: #999; /* 占位文字颜色 */
		  }
		}
	}
	.reply-content{
		background-color: #f0f0f0; /* 设置淡灰色背景 */
		flex: 1;
	.reply-list{
		background-color:  #f0f0f0; /* 设置淡灰色背景 */
		height: 100%;
		width: 100%;
		//flex: 1;
		.main-comment{
			margin-bottom: 20rpx;
		}
		.reply-header {
		 background-color: white;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		 // margin-bottom: 10px; /* 增加下方间距 */
		 .reply-count {
		   font-size: 14px; /* 可以根据需要调整 */
		   color: #555; /* 可以根据需要调整 */
		   padding-left: 20rpx;
		 }
		 
		 .reply-icon  {
			 display: flex;
			 align-items: center;
			 justify-content: center;
			  color: #555; /* 可以根据需要调整 */
			  margin-right: 10rpx;
			 .reply-icon-text{
				 
			 }
		   .iconfont {
			  // color: #000;
		   	// background-color: gold;
		       text-align: center;
		       font-size: 40rpx;
		       height: 40rpx;
		       width: 40rpx;
		       line-height: 40rpx;
		       margin-right: 10rpx;
		       transition: color 0.2s,transform 0.2s; /* 动画效果 */
		   }
		 }
		}
	}
	}
	.write-comment-xhd{
		padding: 20rpx;
		border-radius: 30rpx;
	}
	
	}
}
/* 滑入效果 */
.reply-panel.slide-in {
  transform: translateY(0); /* 滑入 */

}

/* 滑出效果 */
.reply-panel.slide-out {
  transform: translateY(100%); /* 滑出 */
}

.overlay {
	  z-index: 10000;
	  position: fixed; /* 固定定位 */
	  top: 0; 
	  left: 0; 
	  right: 0; 
	  bottom: 0; 
	 background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
	  display: flex; /* 使用 flexbox 居中 */
	  justify-content: center; /* 水平居中 */
	  align-items: flex-end; /* 垂直底部对齐 */
	  .sliding-panel {
	    background-color:white; /* 背景颜色 */
	    border-top: 1px solid #ccc; /* 顶部边框 */
	    padding: 10px; /* 内边距 */
	    width: 100%; /* 宽度占满 */
	    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		display: flex;
		flex-direction: column; /* 垂直排列 */
		.text{
			margin-left: 20rpx;
			margin-bottom: 20rpx;
		}
		.content{
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 20rpx;
			position: relative;
			.textarea-input-placeholder{
				//background-color: red;
				position: relative;
				display: flex;
				 align-items: center;
				 justify-content: center; /* 水平居中 */
			}
			.placeholder {
				
			   display: flex;
			    align-items: center;
			    position: absolute;
				//background-color: #000;
			   flex-direction: column; /* 垂直排列 */
			   
			  .placeholder-image {
			   width: 150rpx;
			   height: 120rpx;
			   margin-bottom: 10rpx; /* 图片与文字之间的间距 */
			  }
			  
			  .placeholder-text {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			    color: #999; /* 占位文字颜色 */
			  }
			}
			
			
			.textarea-input{
			  flex: 1;
			  height: 250rpx; /* 适当高度 */
			  margin-left: 5px;
			  //max-width: 90%;
			  border: 1px solid #ccc;
			  background-color: rgba(0, 0, 0, 0.05);
			  border-radius: 20rpx;
			  padding: 20rpx; /* 内边距 */
			 box-sizing: border-box; /* 包括内边距和边框在内的总宽度和高度 */
			 transition: border-color 0.3s, background-color 0.3s; /* 添加过渡效果 */
			 
			}
			.is-focused {
			  border-color: #007bff; /* 选中时边框颜色 */
			  background-color: rgba(0, 123, 255, 0.1); /* 选中时背景颜色 */
			  outline: none; /* 去掉默认的聚焦轮廓 */
			}
			.submit-button {
				text-align: center;
			margin-right: 5px;
			  margin-left: 5px;
			  font-size: 16px;
			  padding: 0 20px;
			  background-color: #007bff;
			  color: white;
			  border: none;
			  border-radius: 25rpx;
			  cursor: pointer;
			}
			.submit-button:hover {
			  background-color: #0056b3;
			}
		}
	    
	  }
	  .slide-fade-enter-active, .slide-fade-leave-active {
	    transition: opacity 0.5s, transform 0.5s;
	  }
	  .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
	    opacity: 0;
	    transform: translateY(100%); /* 从下方滑入 */
	  }
	}
	
	
	
	//选择框
	.comment-popup-overlay {
	  position: fixed;
	  z-index: 9999;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.4); /* 黑幕 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.comment-popup{
		//height: 600rpx;
		z-index: 9999;
		position: fixed;
	    bottom: 0; /* 初始位置在视图外 */
		left: 0;
		right: 0;
		transform: translateY(100%);
		transition: transform 0.5s ease; /* 添加过渡效果 */
		 background: #f0f0f0; /* 改为灰色背景 */
		  border-radius: 18px;
		  padding: 20px;
		.options {
		 margin-top: 20px; /* 在内容和按钮之间添加间距 */
		   display: flex; /* 使用 Flexbox 布局 */
		   flex-direction: column; /* 垂直排列 */
		}
		
	.option-group {
	  display: flex; /* 每组选项使用 Flexbox */
	  flex-direction: column; /* 垂直排列选项 */
	 // align-items: center; /* 中心对齐 */
	  margin-bottom: 30rpx;
	   //padding: 0 60rpx;
	  background-color: white;
	  //box-sizing: border-box;
	  border-radius: 20rpx;
	    padding: 10px 15px; /* 内边距 */
	}
	
	.option {
	
	  //width: 80%; /* 选项宽度占满整个组 */
	  height: 40px;
	  background-color: white; /* 选项背景色为白色 */
	  color: #333; /* 文本颜色 */
	  border-radius: 5px; /* 圆角 */
	  cursor: pointer; /* 鼠标悬停时显示为手型 */
	  display: flex; /* 使用 Flexbox 布局 */
	  align-items: center; /* 垂直居中对齐图标和文字 */
	  transition: background-color 0.3s; /* 背景色变化的过渡效果 */
	}
	
	.option:hover {
	  background-color: #e0e0e0; /* 鼠标悬停时的背景色 */
	}
	
	.icon {
	  color: #000;
	  width: 23px; /* 图标宽度 */
	  height: 23px; /* 图标高度 */
	  font-size: 23px;
	  line-height: 23px;
	  text-align: center;
	  margin:0 10px; /* 图标与文字之间的间距 */
	}

	.optionBorder{
		 border-bottom: 1rpx solid #ccc;
	}
	.option:hover {
	  background-color: #e0e0e0; /* 鼠标悬停时的背景色 */
	}
	
	

	}
	/* 滑入效果 */
	.comment-popup.slide-in {
	  transform: translateY(0); /* 滑入 */
	
	}
	
	/* 滑出效果 */
	.comment-popup.slide-out {
	  transform: translateY(100%); /* 滑出 */
	}
</style>